<template>
  <div class="goodsadd">
    <left-menus active="1"></left-menus>
    <div class="goodsadd-main">
      <Breadcrumb :title="title"></Breadcrumb>
      <div class="goodsadd-main_content">
        <div>
          <div class="contenttitle">基本信息</div>
          <div class="goodsadd-main_contentFirst">
            <div class="contentFirst-input contentFirst-input_diff">
              <p>商品类别：</p>
              <el-cascader
                v-model="categoryId"
                :props="optionProps"
                :options="category"
                @change="getGoodsInfo"
                :clearable="true"
              ></el-cascader>
            </div>
            <div class="contentFirst-input">
              <p>商品标题：</p>
              <el-input
                type="text"
                placeholder="请输入商品标题"
                v-model.trim="goodsTitle"
                @input="widthCheck(60)"
                show-word-limit
                suffix
              >
                <slot slot="suffix" class="input-slot">{{textNum}}/60</slot>
              </el-input>
            </div>
            <div class="contentFirst-input contentFirst-textarea">
              <p>商品规格：</p>
              <div class="contentSecond-check">
                <el-tabs v-model="activeName">
                  <el-tab-pane label="默认规格" name="first">
                    已选择默认规格
                    <div class="bage">
                      <span style="min-width:45px;lineHeight:40px">库存：</span>
                      <el-input
                        type="text"
                        placeholder="请输入库存"
                        v-model="stock"
                        oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
                      ></el-input>
                      <span style="min-width:45px;lineHeight:40px;marginLeft:10px;">价格：</span>
                      <el-input
                        type="text"
                        placeholder="请输入价格"
                        v-model="price"
                        oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
                      ></el-input>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="自定义" name="second">
                    <el-checkbox-group v-model="checkboxGroup" @change="onbage">
                      <el-checkbox-button
                        v-for="item in specification"
                        :label="item.name"
                        :key="item.id"
                      >{{item.name}}</el-checkbox-button>
                    </el-checkbox-group>
                    <div v-if="isbage">
                      <div class="bage">
                        <el-input
                          type="text"
                          class="badge-card"
                          v-for="(item,index) in bage"
                          v-model="bage1[index]"
                          :key="index"
                          :placeholder="'请输入'+myBageX[index]"
                        ></el-input>
                        <span style="min-width:45px;lineHeight:40px">库存：</span>
                        <el-input
                          type="text"
                          placeholder="请输入库存"
                          v-model="stock"
                          oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
                        ></el-input>
                        <span style="min-width:45px;lineHeight:40px;marginLeft:10px;">价格：</span>
                        <el-input
                          type="text"
                          placeholder="请输入价格"
                          v-model="price"
                          oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
                        ></el-input>
                      </div>
                      <el-button size="mini" round @click="addBage" style="marginTop:15px">保存</el-button>
                    </div>
                    <div v-for="(item,index) in bage2" :key="index" class="guige">
                      <span>规格：{{item.name}}</span>
                      <span>库存：{{item.stock}}</span>
                      <span>价格：{{item.price}}</span>
                      <el-button type="text" @click="deletBage2(index)">删除</el-button>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>
            <div class="contentFirst-input contentFirst-input_diff">
              <p>支付模板：</p>
              <el-select v-model="priceTemplate" placeholder="请选择" @change="selectPayTemplate">
                <el-option
                  v-for="item in payTemplate"
                  :key="item.id"
                  :label="item.des"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
            <div class="percent" v-if="!disabled">
              <div class="percent-head">
                <span>积分百分比</span>
                <span>人民币百分比</span>
              </div>
              <el-slider v-model="value1"></el-slider>
            </div>
            <div
              class="contentFirst-input contentFirst-input_diff contentFirst-textarea contentSecond-check"
            >
              <p>选择运费：</p>
              <el-tabs v-model="activeName1">
                <el-tab-pane label="包邮" name="first"></el-tab-pane>
                <el-tab-pane label="自定义" name="second">
                  <div style="display:flex">
                    <el-select v-model="freightTemplate" placeholder="请选择" @change="showFreight">
                      <el-option
                        v-for="item in freights"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                    <el-button
                      style="marginLeft:10px"
                      type="text"
                      @click="dialogVisible = true"
                    >新建运费模板</el-button>
                  </div>
                  <div class="contentFirst-freight" v-if="freightMsg.name">
                    <div>
                      <p>名称：{{freightMsg.name}}</p>
                      <p>
                        <!-- <span v-if="freightMsg.templateType === 1">按件数</span>
                        <span v-else>按重量</span>-->
                        <span>按件数</span>
                      </p>
                      <p>
                        <span style="marginRight:25px">首件：{{freightMsg.firstPrice}}</span>
                        <span>续件：{{freightMsg.continuePrice}}</span>
                      </p>
                      <p>说明：{{freightMsg.des}}</p>
                    </div>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
            <div class="contentFirst-input contentFirst-input_diff">
              <p>品牌：</p>
              <el-input type="text" placeholder="请输入品牌" v-model="brand"></el-input>
            </div>
            <div class="contentFirst-input contentFirst-textarea">
              <div class="contentFirst-img">
                <el-upload
                  class="avatar-uploader"
                  :action="BASE_URL"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                  :headers="{'Authorization':Authorization}"
                  :data="{'folderName':'shop'}"
                >
                  <img v-if="imgurl.imgurl1" :src="imgurl.imgurl1" class="avatar" />
                  <div v-else class="upimg">
                    <span>主图</span>
                    <i class="el-icon-plus avatar-uploader-icon"></i>
                  </div>
                </el-upload>
              </div>
              <div class="contentFirst-img">
                <el-upload
                  class="avatar-uploader"
                  :action="BASE_URL"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess1"
                  :before-upload="beforeAvatarUpload"
                  :headers="{'Authorization':Authorization}"
                  :data="{'folderName':'shop'}"
                >
                  <img v-if="imgurl.imgurl2" :src="imgurl.imgurl2" class="avatar" />
                  <div v-else class="upimg">
                    <i class="el-icon-plus avatar-uploader-icon"></i>
                  </div>
                </el-upload>
              </div>
              <div class="contentFirst-img">
                <el-upload
                  class="avatar-uploader"
                  :action="BASE_URL"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess2"
                  :before-upload="beforeAvatarUpload"
                  :headers="{'Authorization':Authorization}"
                  :data="{'folderName':'shop'}"
                >
                  <img v-if="imgurl.imgurl3" :src="imgurl.imgurl3" class="avatar" />
                  <div v-else class="upimg">
                    <i class="el-icon-plus avatar-uploader-icon"></i>
                  </div>
                </el-upload>
              </div>
              <div class="contentFirst-img">
                <el-upload
                  class="avatar-uploader"
                  :action="BASE_URL"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess3"
                  :before-upload="beforeAvatarUpload"
                  :headers="{'Authorization':Authorization}"
                  :data="{'folderName':'shop'}"
                >
                  <img v-if="imgurl.imgurl4" :src="imgurl.imgurl4" class="avatar" />
                  <div v-else class="upimg">
                    <i class="el-icon-plus avatar-uploader-icon"></i>
                  </div>
                </el-upload>
              </div>
              <div class="contentFirst-img">
                <el-upload
                  class="avatar-uploader"
                  :action="BASE_URL"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess4"
                  :before-upload="beforeAvatarUpload"
                  :headers="{'Authorization':Authorization}"
                  :data="{'folderName':'shop'}"
                >
                  <img v-if="imgurl.imgurl5" :src="imgurl.imgurl5" class="avatar" />
                  <div v-else class="upimg">
                    <i class="el-icon-plus avatar-uploader-icon"></i>
                  </div>
                </el-upload>
              </div>
            </div>
            <div class="contentFirst-input contentFirst-textarea">
              <p>商品描述：</p>
              <div id="wangeditor">
                <div ref="editorElem" style="text-align:left;"></div>
              </div>
            </div>
            <div class="contentFirst-input contentFirst-input_diff">
              <p>上架选择：</p>
              <el-checkbox v-model="isUp">直接上架</el-checkbox>
            </div>
          </div>
        </div>
      </div>
      <div class="goodsadd-foot">
        <el-button type="primary" @click="addGoods">提交</el-button>
        <!-- <el-button>保存草稿</el-button> -->
      </div>
      <el-dialog title="运费模板" :visible.sync="dialogVisible" width="30%">
        <span>
          <div class="dialog-input">
            <p>模板名称：</p>
            <el-input type="text" placeholder="请输入模板名称" v-model="storeFreightTemDto.name"></el-input>
          </div>
          <div class="dialog-input">
            <el-radio v-model="storeFreightTemDto.label" label="1">按件数</el-radio>
          </div>
          <div class="dialog-input">
            <div class="dialog-input">
              <p>首件：</p>
              <el-input type="text" placeholder="请输入" v-model="storeFreightTemDto.firstLabel"></el-input>
              <p>元</p>
            </div>
            <div class="dialog-input">
              <p>续件：</p>
              <el-input type="text" placeholder="请输入" v-model="storeFreightTemDto.lastLabel"></el-input>
              <p>元</p>
            </div>
          </div>
          <div class="dialog-input">
            <p>模板说明：</p>
            <el-input
              type="textarea"
              placeholder="请输入模板说明"
              v-model="storeFreightTemDto.content"
              :rows="4"
            ></el-input>
          </div>
          <div class="dialog-input">
            <el-checkbox v-model="storeFreightTemDto.type">设置为默认模板</el-checkbox>
          </div>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addStoreFreightTemList">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import E from "wangeditor";
import LeftMenus from "@/views/components/leftMenus";
import Breadcrumb from "@/views/components/Breadcrumb";
import { BASE_URL } from "@/utils/service.js";
import { mapState } from "vuex";
export default {
  name: "Editor",
  data() {
    return {
      title: {
        group: "商品管理",
        name: "添加新商品",
      },
      textNum: 0,
      value1: null,
      disabled: false,
      BASE_URL,
      active: 1,
      activeName: "first",
      activeName1: "first",
      isbage: false,
      checkboxGroup: [],
      bage: [],
      bage1: [],
      bage2: [],
      myBageX: [],
      imgurl: {
        imgurl1: "",
        imgurl2: "",
        imgurl3: "",
        imgurl4: "",
        imgurl5: "",
      },
      dialogVisible: false,
      editor: null,
      editorContent: "",
      specification: [],
      category: [],
      optionProps: {
        value: "id",
        label: "name",
        children: "childGoodsCategoryList",
      },
      freights: [],
      freightMsg: {},
      payTemplate: [],
      storeFreightTemDto: {
        name: "",
        label: "1",
        firstLabel: null,
        lastLabel: null,
        content: "",
        type: false,
      },
      categoryId: "", // 商品ID
      goodsTitle: "", // 商品标题
      categoryName: "", // 类别名称
      stock: "", // 库存
      price: null, // 价格
      list: [], // 规格集合
      freightTemplate: null, // 运费模板编号
      priceTemplate: null, // 支付模板编号
      isUp: false, // 是否上架
      brand: "", // 品牌
    };
  },
  created() {
    this.GoodsCategory();
    this.getStoreFreightTemList();
    this.getPayTemplate();
    this.Authorization = localStorage.getItem("intrachaincode");
  },
  mounted() {
    this.editor = new E(this.$refs.editorElem);
    // 编辑器的事件，每次改变会获取其html内容
    this.editor.customConfig.onchange = (html) => {
      this.editorContent = html;
    };
    this.editor.customConfig.menus = [
      // 菜单配置
      "head", // 标题
      "bold", // 粗体
      "fontSize", // 字号
      "fontName", // 字体
      "italic", // 斜体
      "underline", // 下划线
      "strikeThrough", // 删除线
      "foreColor", // 文字颜色
      "backColor", // 背景颜色
      "link", // 插入链接
      "list", // 列表
      "justify", // 对齐方式
      "quote", // 引用
      "emoticon", // 表情
      "image", // 插入图片
      "table", // 表格
      "code", // 插入代码
      "undo", // 撤销
      "redo", // 重复
    ];
    this.editor.customConfig.debug = true;
    this.editor.customConfig.uploadImgServer = BASE_URL; // 上传图片到服务器
    this.editor.customConfig.uploadFileName = "file";
    this.editor.customConfig.uploadImgMaxLength = 5;
    this.editor.customConfig.uploadImgMaxSize = 10 * 1024 * 1024; // 设置图片大小为10M
    this.editor.customConfig.uploadImgTimeout = 1000000; // 图片上传超时限制10s
    this.editor.customConfig.uploadImgHeaders = {
      Enctype: "multipart/form-data",
      Authorization: this.Authorization,
    };
    this.editor.customConfig.uploadImgHooks = {
      customInsert: function (insertImg, result, editor) {
        // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
        insertImg(result.data.url);
      },
    };
    this.editor.create();
  },
  methods: {
    widthCheck(maxLen) {
      var w = 0;
      var tempCount = 0;
      //length 获取字数数，不区分汉子和英文
      for (var i = 0; i < this.goodsTitle.length; i++) {
        //charCodeAt()获取字符串中某一个字符的编码
        var c = this.goodsTitle.charCodeAt(i);
        //单字节加1
        if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {
          w++;
          if (w <= 60) {
            this.textNum = w;
          }
        } else {
          w += 2;
          if (w <= 60) {
            this.textNum = w;
          }
        }
        if (w > maxLen) {
          this.goodsTitle = this.goodsTitle.substr(0, i);
          break;
        }
      }
    },
    async GoodsCategory() {
      // 获取商品分类
      const res = await this.axios.goodsCategory();
      this.category = res.data.data;
      this.category.map((el) => {
        el.childGoodsCategoryList.map((el1) => {
          el1.childGoodsCategoryList.map((el2) => {
            if (!el2.childGoodsCategoryList.length) {
              el2.childGoodsCategoryList = undefined;
            }
          });
        });
      });
    },
    async getGoodsInfo() {
      // 获取商品规格
      let obj = {
        categoryId: parseInt(this.categoryId),
      };
      const res = await this.axios.getGoodsInfo(obj);
      this.specification = res.data.data.length?res.data.data:null;
    },
    async getStoreFreightTemList() {
      //  获取运费模板
      let obj = {
        storeId: this.print.id,
      };
      const res = await this.axios.getStoreFreightTemList(obj);
      this.freights = res.data.data;
    },
    async addStoreFreightTemList() {
      //  添加运费模板
      let obj = {
        continueAmount: 1,
        continuePrice: parseInt(this.storeFreightTemDto.lastLabel),
        des: this.storeFreightTemDto.content,
        firstAmount: 1,
        firstPrice: parseInt(this.storeFreightTemDto.firstLabel),
        isDefault: this.storeFreightTemDto.type ? 1 : 0,
        name: this.storeFreightTemDto.name,
        storeId: this.print.id,
        templateType: parseInt(this.storeFreightTemDto.label),
      };
      const res = await this.axios.addStoreFreightTemList(obj);
      if (res.data.code === 200) {
        this.$message({
          message: "添加成功",
          type: "success",
          duration: 2000,
          onClose: () => {
            this.dialogVisible = false;
            this.getStoreFreightTemList();
          },
        });
      } else {
        this.$message({
          message: res.data.message,
          type: "warning",
        });
      }
    },
    async getPayTemplate() {
      // 获取支付模板
      const res = await this.axios.getPayTemplate();
      this.payTemplate = res.data.data;
    },
    selectPayTemplate() {
      // 选择支付模板
      if (this.priceTemplate === 1) {
        this.disabled = true;
        this.value1 = 0;
      }
      if (this.priceTemplate === 2) {
        this.disabled = false;
        this.value1 = 0;
      }
      if (this.priceTemplate === 3) {
        this.disabled = true;
        this.value1 = 100;
      }
    },
    async addGoods() {
      // 添加商品
      if(!this.goodsTitle)return this.$message.warning("请填写商品标题")
      if(!this.brand)return this.$message.warning("请填写品牌")
      if (this.imgurl.imgurl1) {
        if (this.freightTemplate || this.activeName1 === "first") {
          if (this.priceTemplate) {
            let categoryName = "";
            let level1Name = "";
            let level2Name = "";
            let stock = 0;
            let price = 0;
            let prices = [];
            let isFree = 0;
            function b(c, d) {
              return c - d;
            }
            this.category.map((el) => {
              if (el.id === this.categoryId[0]) {
                level1Name = el.name;
                el.childGoodsCategoryList.map((el1) => {
                  if (el1.id === this.categoryId[1]) {
                    level2Name = el1.name;
                    el1.childGoodsCategoryList.map((el2) => {
                      if (el2.id === this.categoryId[2]) {
                        categoryName = el2.name;
                      }
                    });
                  }
                });
              }
            });
            if (this.activeName === "first") {
              this.list = [
                {
                  price: parseFloat(this.price),
                  stock: parseFloat(this.stock),
                  specsDesJSONObject: { 规格: "默认规格" },
                  sort: 1,
                },
              ];
              stock = this.stock;
              price = this.price;
            } else {
              this.list.map((el, index) => {
                el.sort = index + 1;
                stock += parseFloat(el.stock);
                prices.push(el.price);
              });
              prices.sort(b);
            }
            if (this.activeName1 === "first") {
              isFree = 1;
              this.freightTemplate = null;
            } else {
              isFree = 0;
            }
            let picList = [];
            let picList1 = [
              this.imgurl.imgurl1,
              this.imgurl.imgurl2,
              this.imgurl.imgurl3,
              this.imgurl.imgurl4,
              this.imgurl.imgurl5,
            ];
            picList1.map((el) => {
              if (el) {
                picList.push(el);
              }
            });
            let obj = {
              categoryId: this.categoryId[2],
              categoryName,
              level1Id: this.categoryId[0],
              level1Name,
              level2Id: this.categoryId[1],
              level2Name,
              cnyPriceRate: parseFloat((100 - this.value1) / 100),
              currencyPriceRate: parseFloat(this.value1 / 100),
              defaultPic: this.imgurl.imgurl1,
              detail: this.editorContent,
              freightTemplate: this.freightTemplate,
              goodsTitle: this.goodsTitle,
              isUp: this.isUp ? 1 : 0,
              list: this.list,
              picList,
              price: price ? parseFloat(price) : parseFloat(prices[0]),
              priceTemplate: this.priceTemplate,
              isFree,
              stock,
              storeId: this.print.id,
              storeName: this.print.storeName,
              brand: this.brand,
            };
            const res = await this.axios.addGoods(obj);
            if (res.data.code === 200) {
              this.$message({
                message: "添加成功",
                type: "success",
                duration: 2000,
                onClose: () => {
                  this.$router.go(0);
                },
              });
            } else {
              this.$message({
                message: res.data.message,
                type: "warning",
              });
            }
          } else {
            this.$message({
              message: "请选择支付模板",
              type: "warning",
            });
          }
        } else {
          this.$message({
            message: "请选择运费模板",
            type: "warning",
          });
        }
      } else {
        this.$message({
          message: "请添加商品主图",
          type: "warning",
        });
      }
    },
    showFreight() {
      // 展示运费模板
      this.freights.map((el) => {
        if (el.id === this.freightTemplate) {
          this.freightMsg = el;
        }
      });
    },
    onbage(index) {
      // 将点击的元素的索引赋值给变量
      if (this.checkboxGroup.length) {
        this.bage = [];
        this.myBageX = [];
        this.isbage = true;
        this.bage = this.checkboxGroup;
        this.specification.map((el) => {
          this.checkboxGroup.map((el1) => {
            if (el.name === el1) {
              this.myBageX.push(el.name);
            }
          });
        });
      } else {
        this.isbage = false;
      }
    },
    addBage() {
      // 添加
      if (this.bage1.length) {
        if (this.stock) {
          if (this.price) {
            let obj1 = {};
            for (var i = 0; i < this.bage.length; i++) {
              obj1[this.myBageX[i]] = this.bage1[i];
            }
            let obj = {
              name: this.bage1.join(),
              stock: this.stock,
              price: this.price,
            };
            this.bage2.push(obj);
            this.list.push({
              price: this.price,
              specsDes: JSON.stringify(obj1),
              specsDesJSONObject: obj1,
              stock: this.stock,
            });
            this.bage1 = [];
            this.stock = "";
            this.price = "";
          } else {
            this.$message({
              message: "请输入价格",
              type: "warning",
            });
          }
        } else {
          this.$message({
            message: "请输入库存",
            type: "warning",
          });
        }
      } else {
        this.$message({
          message: "请输入规格",
          type: "warning",
        });
      }
    },
    deletBage2(index) {
      this.bage2.splice(index, 1);
      this.list.splice(index, 1);
    },
    handleAvatarSuccess(res, file) {
      // 获取图片url
      this.imgurl.imgurl1 = res.data.url;
    },
    handleAvatarSuccess1(res, file) {
      this.imgurl.imgurl2 = res.data.url;
    },
    handleAvatarSuccess2(res, file) {
      this.imgurl.imgurl3 = res.data.url;
    },
    handleAvatarSuccess3(res, file) {
      this.imgurl.imgurl4 = res.data.url;
    },
    handleAvatarSuccess4(res, file) {
      this.imgurl.imgurl5 = res.data.url;
    },
    beforeAvatarUpload(file) {
      // 上传图片
      // const typeArr = ["image/jpeg", "image/png", "image/gif"];
      // const isLt2M = file.size / 1024 / 1024 < 1;
      // const typeType = typeArr.indexOf(file.type);
      // if (typeType < 0) {
      //   this.$message.error("请选择JPG/PNG/GIF格式的图片!");
      // }
      // if (!isLt2M) {
      //   this.$message.error("请选择不超过1MB的图片!");
      // }
      // return typeType >= 0 && isLt2M;
    },
  },
  components: {
    LeftMenus,
    Breadcrumb,
  },
  computed: {
    ...mapState({
      print: (state) => state.print.all,
    }),
  },
};
</script>

<style lang="scss" scoped>
.goodsadd {
  /deep/ .el-input__suffix-inner {
    height: 40px;
    line-height: 40px;
  }
  display: flex;
  justify-content: center;
  .goodsadd-main {
    width: 960px;
    background-color: #fff;
    padding: 10px;
    .goodsadd-main_content {
      border: 1px solid rgba(229, 230, 234, 1);
      border-top: 0;
      margin: 15px 0;
      .contenttitle {
        box-sizing: border-box;
        padding: 10px;
        line-height: 28px;
        font-weight: bold;
        height: 50px;
        background-color: rgba(245, 245, 245, 1);
        border-top: 2px solid rgba(176, 184, 184, 1);
      }
      .goodsadd-main_contentFirst {
        padding-left: 80px;
        padding-right: 20px;
        padding-bottom: 20px;
        .contentFirst-input {
          display: flex;
          align-items: center;
          margin: 30px 0;
          width: 100%;
          p {
            min-width: 80px;
            margin-right: 24px;
          }
        }
        .contentFirst-input_diff {
          width: 70%;
          /deep/ .el-select {
            width: 100%;
          }
        }
        .contentFirst-freight {
          padding: 15px;
          display: flex;
          margin-top: 15px;
          justify-content: space-between;
          background-color: rgba(244, 244, 245, 1);
          p {
            text-align: left;
            font-size: 14px;
            line-height: 30px;
          }
        }
        .contentFirst-textarea {
          align-items: flex-start;
          /deep/ .el-textarea__inner,
          .el-textarea {
            width: 100%;
          }
        }
        .contentFirst-img {
          display: flex;
          .upimg {
            display: flex;
            position: relative;
            span {
              position: absolute;
              top: 0;
              left: 5px;
            }
          }
          /deep/ .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            cursor: pointer;
            position: relative;
            overflow: hidden;
          }
          /deep/ .avatar-uploader .el-upload:hover {
            border-color: #409eff;
          }
          /deep/ .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 125px;
            height: 125px;
            line-height: 125px;
            text-align: center;
          }
          /deep/ .avatar {
            width: 125px;
            height: 125px;
            display: block;
          }
        }
        .contentSecond-check {
          /deep/ .el-tabs__item {
            line-height: 24px;
            height: 30px;
          }
          .bage {
            display: flex;
            margin-top: 15px;
            .badge-card {
              margin-right: 25px;
            }
          }
          .guige {
            span {
              min-width: 50px;
              height: 40px;
              line-height: 40px;
              text-align: center;
              font-size: 15px;
              margin-right: 25px;
              font-weight: 700;
            }
          }
        }
      }
    }
    .goodsadd-foot {
      padding: 20px;
      display: flex;
      justify-content: center;
      /deep/ .el-button {
        min-width: 100px;
        border-radius: 0;
      }
      /deep/ .el-button--primary.is-active,
      .el-button--primary:active {
        background-color: rgb(4, 153, 143);
      }
      /deep/ .el-button--primary {
        background-color: rgba(0, 186, 173, 1);
        border-color: rgba(0, 186, 173, 1);
      }
    }
  }
  /deep/ .el-dialog__wrapper {
    z-index: 99999 !important;
  }
  .dialog-input {
    display: flex;
    margin-bottom: 15px;
    p {
      min-width: 80px;
      line-height: 40px;
      margin-left: 5px;
    }
  }
  .percent {
    width: 70%;
    .percent-head {
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>
